<template>
	<div class="department">
		<div class="department_box">
			<div class="depar_title" v-for='(item,index) in departmentList' :key='index'>
				<div class="de_list_title">{{item.name}}</div>
				<div class="de_list_user" v-for="(ite,ind) in item.tow" :key='ind'>
					<div class="de_user">
						<span>{{ite.nick_name}}</span>
						<span>{{ite.true_name}}</span>
					</div>

					<div class="de_input" v-if="departmentStatus">
						<div @click="de_yes(index,ind)">
							<input type="radio" :name='ite.party_id' :id="ite.party_id+'y'" checked >
							<label :for="ite.party_id+'y'">满意</label>
						</div>
						<div @click="de_no(index,ind)">
							<input type="radio" :name='ite.party_id' :id="ite.party_id+'n'">
							<label :for="ite.party_id+'n'">不满意</label>
						</div>
					</div>

					<div v-else class="de_number">
						{{ite.vote}}票
					</div>
				</div>
			</div>
			<div v-if="departmentStatus" class="depar_button" @click="depar_button">投票</div>
			<div v-else class="depar_button">投票已截止</div>

			<div class="program_submit" v-show="program_submit_status">
				<div class="pr_su_box">
					<div class="pr_su_title">重要提示</div>
					<div class="pr_su_tips">您只有一次投票的机会,是否确认投票</div>
					<div class="pr_su_btn">
						<div @click="program_sub_true">投票</div>
						<div @click="program_sub_false">取消</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      departmentList: [],
      departmentStatus: true,
      program_submit_status: false
    }
        },
  created () {
    this.getDepartment()
  },
  methods: {
    getDepartment () {
      let requery = {
        member_id: this.$store.state.member_id
      }
      axios.post('http://web.zhiyunzaixian.com/Party/v1.party/lists', requery).then(res => {
        let {
          code,
          data
        } = res.data
        // console.log(data)
        for (var i = 0; i < data.length; i++) {
          if (data[i].tow) {
            for (var j = 0; j < data[i].tow.length; j++) {
              data[i].tow[j].type = 'yes'
            }
          }
        }
        if (code == 200) {
          this.departmentList = data
        } else if (code == -40004) {
          this.departmentStatus = false
          this.de_See()
        }
      })
    },
    de_See () {
      let query = {
        member_id: this.$store.state.member_id
      }
      axios.post('http://web.zhiyunzaixian.com/Party/v1.party/assemble_res', query).then(res => {
        let {
          code,
          data
        } = res.data
        // console.log('see', data)
        if (code == 200) {
          this.departmentList = data
        }
      })
    },
    de_yes (e, c) {
      this.departmentList[e].tow[c].type = 'yes'
    },
    de_no (e, c) {
      this.departmentList[e].tow[c].type = 'no'
    },
    depar_button () {
      this.program_submit_status = true
    },
    program_sub_false () {
      this.program_submit_status = false
    },
    program_sub_true () {
      // alert('点击投票')
      this.program_submit_status = false
      let requery = {
        member_id: this.$store.state.member_id,
        text: this.departmentList
      }
      // console.log(requery)
      axios.post('http://web.zhiyunzaixian.com/Party/v1.party/vote', requery).then(res => {
        // console.log(res,'成功')
        // alert(res)
        let {
          code,
          data
        } = res.data
        if (code == 200) {
          // //alert('投票成功')
          this.de_See()
          this.departmentStatus = false
        } else {
          // alert('投票失败')
        }
      })
    }
  }
}
</script>

<style>
    .department {
        overflow: scroll;
        background: #F0F0F0;
        width: 100vw;
        height: 100vh;
    }

    .depar_title {
        background: white;
        margin-bottom: 15px;
    }

    .de_list_title {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        color: #333333;
        border-bottom: #F0F0F0 1px solid;
    }

    .de_list_user {
        display: flex;
        padding: 0 20px;
        font-size: 14px;
        color: #333333;
        height: 60px;
        line-height: 60px;
        border-bottom: #F0F0F0 1px solid;
    }

    .de_user {
        height: 60px;
        position: relative;
    }

    .de_user>span {
        position: absolute;
        display: block;
        height: 30px;
        line-height: 30px;
        left: 0;
    }

    .de_user>span:nth-child(1) {
        top: 0;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .de_user>span:nth-child(2) {
        top: 30px;
    }

    .de_list_user>div {
        flex: 1;
    }

    .de_input {
        display: flex;
    }

    .de_input>div {
        flex: 1;
    }

    .de_number {
        text-align: right;
    }

    .program_submit {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 100;
        background: rgba(0, 0, 0, 0.8);
        overflow: hidden;
    }

    .pr_su_box {
        width: 70vw;
        height: 180px;
        background: white;
        margin-left: 15vw;
        margin-top: 35vh;
        text-align: center;
        border-radius: 2px;
        position: relative;
    }

    .pr_su_title {
        font-size: 18px;
        font-weight: bold;
        height: 50px;
        line-height: 50px;
        color: #333333;
    }

    .pr_su_tips {
        font-size: 15px;
        color: #999999;
        padding: 5px 30px;
    }

    .pr_su_btn {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
        display: flex;
        border-top: 1px solid #CCCCCC;
    }

    .pr_su_btn>div {
        flex: 1;
        font-size: 15px;
    }

    .pr_su_btn>div:first-child {
        color: #3CC51F;
        border-right: 1px solid #CCCCCC;
    }

    .depar_button {
        width: 120px;
        height: 41px;
        background: #DA4131;
        color: white;
        line-height: 41px;
        margin: 30px 0;
        margin-left: calc(50vw - 60px);
        font-size: 15px;
        text-align: center;
        border-radius: 5px;
    }
</style>
